{% extends 'images/images_base.html' %}

{% block title %} Delete image {% endblock %}

{% block content %}
    <div id="wrapper">
        <h2>Deleting a photo</h2>
        <div class="line"></div>
        <p style="margin-bottom: 20%;">Do you really want to delete this photo?</p>
        <img src="{{ image.image.url }}">
        <div class="buttons">
            <form action="{% url 'images:delete_image' slug=image.slug %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>
            <a href="{% url 'images:show' %}" class="btn btn-secondary">Come back</a>
        </div>
    </div>
    <style>
        .buttons {
            display: flex;
        }

        form button {
            margin-right: 0.5em;
        }

        img {
            width: 18em;
            height: 13em;
            margin-bottom: 1em;
            border: 1px solid #DDD;
            border-radius: 8px;
        }
    </style>
{% endblock content %}
